<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<h2 style="text-align: center">图书借阅登记</h2>
<form id="frmBorrow" action="">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cells__title">手机号<span id="errMobile" style="margin-left:10px;color: red"></span>
            <span id="succMobile" style="margin-left:10px;color: green"></span>
        </div>

        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input id="mobile" name="mobile" class="weui-input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="weui-cell__ft">
                <button id="btnCheck" type="button" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>
        <div class="weui-cells__title">验证码</div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
                <input class="weui-input"  type="number" placeholder="请输入6位验证码">
            </div>

        </div>
        <div class="weui-cells__title">借阅图书</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" id="name" name="name" type="text" placeholder="请选择要借阅的图书">
                <input type="hidden" name="bid" id="bid">
            </div>
        </div>

        <div class="weui-cells__title">借阅时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="takedate" class="weui-input" placeholder="请选择取书日期" id='takedate'/>
            </div>
        </div>

        <div class="weui-cells__title">归还时间</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input type="text" name="returndate" class="weui-input" placeholder="请选择还书日期" id='returndate'/>
            </div>
        </div>
        <br>
        <a href="javascript:;" id="btnSubmit" class="weui-btn weui-btn_primary">提交</a>
    </div>

</form>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

<script>
    $("#takedate,#returndate").calendar({
        dateFormat: "yyyy-mm-dd"
    });

    $("#btnCheck").click(function(){
        var mobile = $("#mobile").val();
        $.ajax({
            url : "http://10.0.0.1:9000/pmember/check" ,
            data : {"mobile" : mobile} ,
            type : "get",
            dataType : "json" ,
            success : function(json){
                if(json.code == "0"){
                    $("#succMobile").text("会员:" + json.data.name);
                    $("#succMobile").show();
                    $("#errMobile").hide();
                }else{
                    $("#errMobile").text(json.message);
                    $("#succMobile").hide();
                    $("#errMobile").show();
                }
            }
        })
    });

    var  name = $("#name").val();
    $.ajax({
        url : "http://10.0.0.1:9000/pbook/list" ,
        type : "get" ,
        dataType : "json" ,
        success : function(json){
            var books = json.data;
            var bs = new Array();
            for(var i = 0 ; i < books.length ; i++){
                var book = books[i];
                var item = {};
                item.title = book.name;
                item.value = book.bid;
                bs.push(item);
            }
            console.info(bs);

            $("#name").select({
                title : "请选择图书" ,
                items : bs
            })
        }
    })

    $("#btnSubmit").click(function(){
        $("#bid").val($("#name").attr("data-values"));
        var param = $("#frmBorrow").serialize();
        console.info(param);
        $.ajax({
            url : "http://10.0.0.1:9000/pbook/borrow" ,
            data : param ,
            dataType : "json" ,
            type : "post",
            success : function(json){
                console.info(json);
                if(json.code =="0"){
                    $.alert("图书馆借阅登记成功" , function(){
                        window.location.reload();
                    });
                }else{
                    $.alert(json.message);
                }
            }
        })
    });

</script>
</body>
</html>